<script setup>
    import { ref , defineEmits} from 'vue';
    
    import YearOrMonthSelector from './YearOrMonthSelector.vue';
    
    const emit = defineEmits(['selected-day-str']);

    const weekDays = ref(["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]);
    const currentDay = ref(new Date());
    // const selectedDay = ref(new Date())
    const currentYear = currentDay.value.getFullYear();
    const currentMonth = currentDay.value.getMonth();

    const selectedDay = ref(currentDay);
    const selectedMonth = ref(currentMonth);
    const selectedYear = ref(currentYear);

    

    function getShowDays() {

        let res = [];

        let tmp = [];

        const firstDayOfMonth = new Date(selectedYear.value,selectedMonth.value,1);
        const lastDayOfMonth = new Date(selectedYear.value,selectedMonth.value + 1,0);
        const daysOfMonth = lastDayOfMonth.getDate();
        
        const frontFillDays = firstDayOfMonth.getDay();
        const postFillDays = 35 - frontFillDays - daysOfMonth;

        for (let index = 0; index < frontFillDays; index++) {
            tmp.push(new Date(selectedYear.value,selectedMonth.value,index + 1 - frontFillDays));
        }
        for (let index = 0; index < daysOfMonth; index++) {
            tmp.push(new Date(selectedYear.value,selectedMonth.value,index + 1));
        }
        for (let index = 0; index < postFillDays; index++) {
            tmp.push(new Date(selectedYear.value,selectedMonth.value + 1,index + 1));
        }

        for (let index = 0; index < 5; index++) {
            res.push(tmp.slice(index * 7,(index + 1) * 7));
        }
        return res;
    }

    const showDays = ref(getShowDays())

    function prevYear() {
        selectedYear.value --;
        showDays.value = getShowDays();
    }

    function nextYear() {
        selectedYear.value ++;
        showDays.value = getShowDays();
    }


    function prevMonth() {
        selectedMonth.value --;
        if (selectedMonth.value < 0) {
            selectedMonth.value = 11;
            selectedYear.value --;
        }
        showDays.value = getShowDays();
    }

    function nextMonth() {
        selectedMonth.value ++;
        if (selectedMonth.value > 11) {
            selectedMonth.value = 0;
            selectedYear.value ++;
        }
        showDays.value = getShowDays();
    }

    function sendSelectDay(day) {
        selectedDay.value = day ;
        emit('selected-day-str',selectedDay.value.getTime() / 1000);
    }


</script>

<template>
    <div class="calendar-container">
        <div class="year-and-month-selector-container">
            <span @click="prevYear">←</span>
            <span>{{ selectedYear }}</span>
            <span @click="nextYear">→</span>
            <span @click="prevMonth">←</span>
            <span>{{ selectedMonth + 1 }}</span>
            <span @click="nextMonth">→</span>
            
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th v-for="(weekDay,index) in weekDays" :key="index">{{ weekDay }}

                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(rows,rowIndex) in showDays" :key="rowIndex">
                        <th v-for="(col,colIndex) in rows" :key="colIndex" @click="sendSelectDay(col)">
                            {{ col.getDate() }}
                        </th>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div>
        <YearOrMonthSelector :year-or-month-type="true" :selected-year="selectedYear"></YearOrMonthSelector>
        <YearOrMonthSelector :year-or-month-type="false" :selected-year="selectedMonth"></YearOrMonthSelector>
    </div>
</template>

<style scoped>

    .calendar-container {  
        display: flex;  
        flex-direction: column; /* 垂直布局 */  
        align-items: center; /* 垂直居中 */  
        justify-content: center; /* 水平居中（但在这个例子中，我们可能只需要垂直居中，因为表格是块级元素，默认会水平填满可用空间） */  
    }  

    .year-and-month-selector-container {  
        display: flex;  
        justify-content: center; /* 这将尝试水平居中，但由于margin-right的存在，可能不是完美的居中 */  
        /* 为了更好的居中效果，我们可以设置一个宽度并使用space-between，但这样需要额外的调整 */  
        /* 或者，我们可以简单地使用text-align: center;和inline-block元素，但这里我们使用Flexbox并接受轻微的偏移 */  
    }  

    span {  
        font-size: 20px;
        margin-right: 10%;
        cursor: pointer; /* 使鼠标悬停在元素上时显示为手形，表明可以点击 */  
        transition: background-color 0.2s, transform 0.2s; /* 添加过渡效果，使点击效果更平滑 */  
    }  
    
    span:active {  
        /*background-color: hsla(160, 100%, 20%, 1);*/ /* 点击时改变背景颜色 */  
        transform: scale(0.95); /* 点击时稍微缩小元素 */  
    }

</style>